{% extends 'web/layout/manage.html' %}
{% load static %}
{% block css %}
    <link rel="stylesheet" href="{% static 'web/plugin/daterangepicker/daterangepicker.css' %}">
{% endblock %}
{% block content %}
    <div class="container-fluid" style="margin-top: 20px">
        <div>
            <div class="input-group" style="width: 300px">
                <span class="input-group-addon"> 日期范围 </span>
                <input id="rangePicker" type="text" class="form-control">
            </div>
        </div>

        <div class="row" style="margin-top: 20px">
            <div class="col-md-8">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <i class="fa fa-bar-chart" aria-hidden="true"></i> 人员工作进度
                    </div>
                    <div class="panel-body">
                        <div id="projectUser" style="height: 300px;"></div>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <i class="fa fa-pie-chart" aria-hidden="true"></i> 优先级统计
                    </div>
                    <div class="panel-body">
                        <div id="priority" style="height: 300px;"></div>
                    </div>
                </div>
            </div>
        </div>

    </div>
{% endblock %}

{% block js %}

    <script src="{% static 'web/plugin/daterangepicker/moment.min.js' %}"></script>
    <script src="{% static 'web/plugin/daterangepicker/daterangepicker.js' %}"></script>
    <script src="{% static 'web/plugin/highcharts/highcharts.js'%}"></script>
    <script>
        var PRIORITY_API = "{% url 'statistics_priority' project_id=request.tracer.project.id %}";
        var PROJECT_USER_API = "{% url 'statistics_project_user' project_id=request.tracer.project.id %}";

        $(function (){
            initDateRangePicker();
            priority(moment().format('YYYY-MM-DD'),moment().add(1,'days').format('YYYY-MM-DD')); //moment()代表当前
            projectUser(moment().format('YYYY-MM-DD'),moment().add(1,'days').format('YYYY-MM-DD'));
        })
        function initDateRangePicker(){
            var options = {
                maxDate: moment(),
                alwaysShowCalendars:true,
                showWeekNumbers:true,
                opens: 'right',
                autoApply:true,
                locale: {
                    format: 'YYYY-MM-DD',
                    separator: ' 至 ',
                    applyLabel: '确定',
                    cancelLabel: '取消',
                    fromLabel: '开始',
                    toLabel: '结束',
                    customRangeLabel: '自定义',
                    weekLabel:'W',
                    daysOfWeek: ['一', '二', '三', '四', '五', '六','日'],
                    monthNames: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
                    firstDay: 1
                },
                ranges: {
                    '今天': [moment(), moment()],
                    '昨天': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
                    '最近7天': [moment().subtract(6, 'days'), moment()],
                    '最近30天': [moment().subtract(29, 'days'), moment()],
                    '本月': [moment().startOf('month'), moment().endOf('month')]
                },
            };
            $('#rangePicker').daterangepicker(options,function (start,end,label){
                // 选择时间后，函数自动被触发
                priority(start.format('YYYY-MM-DD'),end.add(1,'days').format('YYYY-MM-DD'));
                projectUser(start.format('YYYY-MM-DD'),end.add(1,'days').format('YYYY-MM-DD'));
            });
        }

        function priority(start,end){
            var config = {
                chart: {
                    type: 'pie'
                },
                title: {
                    text: 'Egg Yolk Composition'
                },
                credits: {
                    enabled: false //关闭版权信息
                },
                tooltip: {
                    valueSuffix: '%',
                    pointFormat: '{series.name}:<b>{point.y}</b>'
                },
                {#subtitle: {#}
                {#    text:#}
                {#    'Source:<a href="https://www.mdpi.com/2072-6643/11/3/684/htm" target="_default">MDPI</a>'#}
                plotOptions: {
                    pie: {
                        allowPointSelect: true,
                        cursor: 'pointer',
                        dataLabels: {
                            enabled: false
                        },
                        showInLegend: true,
                    }
                },
                series: [{
                    name: '优先级',
                    colorByPoint: true,
                    data: [],
                }]
            };
            $.ajax({
                url:PRIORITY_API,
                type:'GET',
                data:{start:start,end:end},
                dataType:'JSON',
                success:function (res){
                    config.series[0].data = res.data;
                    Highcharts.chart('priority',config);
                }
            })
        }

        function projectUser(start,end){
            var config = {
                chart: {
                    type: 'column'
                },
                title: {
                    text: '',
                    align: 'left'
                },
                credits:{
                    enabled:false // 关闭版权信息
                },
                xAxis: {
                    categories: []
                },
                yAxis: {
                    min: 0,
                    title: {
                        text: '问题数量'
                    },
                    stackLabels: { //堆叠数据标签
                        enabled: true,
                        style:{
                            fontWeight:'bold',
                            color:(Highcharts.theme && Highcharts.theme.textColor) || 'gray'
                        }
                    }
                },
                legend: {
                    align: 'center',
                    verticalAlign: 'top',
                    {#floating: true,#}
                    {#backgroundColor:#}
                    {#    Highcharts.defaultOptions.legend.backgroundColor || 'white',#}
                    {#borderColor: '#CCC',#}
                    {#borderWidth: 1,#}
                    {#shadow: false#}
                },
                tooltip: {
                    formatter:function (){
                        return '<b>' + this.x + '</b><br/>' +
                       this.series.name + ':' + this.y + '<br/>' + '总量：' + this.point.stackTotal;
                    }

                },
                plotOptions: {
                    column: {
                        stacking: 'normal',
                        dataLabels: {
                            enabled: false // 在图表的图形中，显示不显示这块区域的大小
                        }
                    }
                },
                series: []
            }
            $.ajax({
                url:PROJECT_USER_API,
                type:'GET',
                data:{start:start,end:end},
                dataType:'JSON',
                success:function (res){
                    config.xAxis.categories = res.data.categories;
                    config.series = res.data.series;
                    Highcharts.chart('projectUser',config);
                }
            })
        }
    </script>

{% endblock %}